<template>
	<view class="content">
		<div class="pos-rel" v-if="loading">



			<div class="main mt-20">
				<div class="bg-fff pt-40 pb-40 pl-20 pr-20">
					<div class="flex-center pb-30 bor-b">
						<image :src="baseUrl + serviceDetail.carouselImageUrls" class="serveImg" mode="aspectFill">
						</image>
						<div class="ml-28">
							<div class="h-84 lh-42 fontS32 ">{{ serviceDetail.serveName }}</div>
							<div class="flex align-baseline mt-28">
								<div class="color-red fontS24">¥</div>
								<div class="color-red fontS32 font-bold">{{ serviceDetail.attributeDtos[0].presentPrice
								}}
								</div>
								<div class="fontS22 color-9 text-decoration-through ml-10"
									v-if="serviceDetail.priceType === 'fix'">¥{{
										serviceDetail.attributeDtos[0].price }}
								</div>
								<div class="fontS22 color-9  ml-10" v-if="serviceDetail.priceType === 'periodic'"> 元/人/月
								</div>

							</div>
						</div>
						<div class="ml-auto">x{{ num }}</div>

					</div>
				</div>


			</div>
			<div class="bottom">
				<div class="customBtn mt-4">
					<button open-type="contact">
						<div class="iconfont icon-kefu"></div>
						<div class="mt-5 fontS18">客服 </div>
					</button>

				</div>
				<div class="customBtn mt-4" @click="collectBtn">
					<button>
						<div class="iconfont icon-shoucang " :class="serviceDetail.isStoreUp ? 'color-yellowG' : ''">
						</div>
						<div class="mt-5 fontS18" :class="serviceDetail.isStoreUp ? 'color-yellowG' : ''">收藏 </div>
					</button>

				</div>
				<div class="bottomBtn fontS26" @click="goTutor" v-if="serviceDetail.priceType === 'tutor'">购买一对一辅导</div>
				<div class="bottomBtn fontS26" @click="buyBtn" v-else>购买服务</div>

			</div>
		</div>
		<!-- 购买弹框 -->
		<div class="buyCover" v-if="showBuyModal" @click="showBuyModal = false"></div>
		<div class="buyContent" v-if="showBuyModal">
			<div class="flex bg-fff pt-30" @click="showBuyModal = false">
				<div class="iconfont icon-close1 ml-auto fontS32 pl-30 pr-30"></div>
			</div>

			<div class="m-30 flex-center">
				<div>数量</div>
				<div class="flex-center ml-auto">
					<div @click="reduceBtn" class="iconfont icon-jian pl-10 pr-10"></div>
					<input class="serveInput  bg-fff text-center" @input="inputNum" type="number" v-model="num">
					<div @click="addBtn" class="iconfont icon-jia pl-10 pr-10"></div>

				</div>
			</div>
			<div class=" p-30 bg-fff">
				<div class="submitBtn" @click="CreatOrder">
					立即购买
				</div>

			</div>
		</div>


		<div v-if="showPopup" @click="closePopups()" class="pageBox"></div>
		<bsLogin @close="closePopup()" :show="showPopup"></bsLogin>


	</view>
</template>

<script>


import {
	findServePersonalDetailApp,
	findServeDetailApp,
	serveAction
} from "@/api/serve";


export default {

	data() {
		return {
			showBuyModal: false,
			currentBanner: 0,
			headerHeight: 0, // 用于存储头部高度
			baseUrl: getApp().globalData.baseUrl,
			title: '人法财',
			isShowbar: false,
			isBack: false,
			serviceDetail: null,
			loading: false,

			swiperList: [],
			iconList: [],
			custom: null,
			navTop: null,
			num: 1



		};
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo;
		},
	},
	onShareTimeline() {
		return {
			title: this.shareLine.title,
			// imageUrl: this.shareLine.imageUrl,
		}
	},

	async onLoad(option) {
		this.num = option.num
		await this.getServiceDetail(option.serveId)
	},

	methods: {

		onBannerChange(e) {
			this.currentBanner = e.detail.current;
		},
		// 详情
		async getServiceDetail(id) {
			let apiUrl = this.userInfo.userType === '02' ? findServePersonalDetailApp : findServeDetailApp
			const {
				data
			} = await apiUrl(id);
			this.serviceDetail = data
			this.loading = true
		},
		// 收藏
		async collectBtn() {
			const {
				data
			} = await serveAction({
				"serveId": this.serviceDetail.serveId,
				"type": 4,
				"userType": this.userInfo.userType
			});
			await this.getServiceDetail(this.serviceDetail.serveId)

		},
		// 数量加减
		reduceBtn() {
			if (this.num > 1) {
				this.num--;
			}
		},
		inputNum(e) {
			console.log(e)
			if (e.detail.value < 1) {
				this.num = 1
			}
		},
		addBtn() {
			this.num++;
		},
		// 跳转导师
		goTutor() {
			uni.navigateTo({
				url: `/pages/service/tutor?serveId=${this.serviceDetail.serveId}`
			})
		},
		buyBtn() {
			this.showBuyModal = true
		},
		// 跳转支付
		CreatOrder() {
			uni.navigateTo({
				url: `/pages/service/pay?serveId=${this.serviceDetail.serveId}`
			})
			// img: this.ser.carouselImageUrls[0],
			//       name: this.ser.serveName,
			//       serveId: this.ser.serveId,
			//       payNum: this.payNum,
			//       price: this.ser.priceType === 'fix' ? this.bindPrice || this.ser.attributeDtos[0].price : null,
			//       cycleValue: this.cycleValue,
			//       attrValue: this.ser.attributeDtos[0].attrId,
			//       type: this.$route.query.type
		}
	},

	onReachBottom() {
	},
	onPullDownRefresh() {
	},
};
</script>

<style lang="less" scoped>
@import url(index.less);

page {
	background-color: #f7f7f7 !important;
}

.content {

	padding-bottom: calc(constant(safe-area-inset-bottom) + 108upx);
	/*兼容 IOS<11.2*/
	padding-bottom: calc(env(safe-area-inset-bottom) + 108upx);
	/*兼容 IOS>11.2*/

}
</style>